<template>
    <div class="app-container">
        <h4 class="form-header h4">基本信息</h4>
        <el-form ref="form" :model="form" label-width="80px">
            <el-row>
                <el-col :span="8" :offset="2">
                    <el-form-item label="用户昵称" prop="nickName">
                        <el-input v-model="form.nickName" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="8" :offset="2">
                    <el-form-item label="用户账号" prop="userName">
                        <el-input  v-model="form.username" disabled />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>


        <h4 class="form-header ">角色信息</h4>
        <!-- 列表区-->
        <el-table :data="roles" ref="table"  :header-cell-style="{background:'#eef1f6',color:'#606266'}" @selection-change="handleSelectionChange" style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="roleId" sortable label="ID"></el-table-column>
            <el-table-column prop="roleName" label="角色名称"></el-table-column>
            <el-table-column prop="roleCode" label="角色编码"></el-table-column>
            <el-table-column prop="createTime" width="180" label="创建时间"></el-table-column>
        </el-table>


        <!--列表分页-->
        <div style="margin: 10px 0">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"> //双引号里面的total是定义一个变量，在这里定义了，就需要在下面data里面初始化一下
            </el-pagination>
        </div>

        <el-form  label-width="100px">
            <el-form-item style="text-align: center;margin-left:520px;margin-top:80px;">
                <el-button type="primary" @click="submitForm()" >提交</el-button>
                <el-button @click="goBack()">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import request from "@/utils/request";
    import { ElMessage } from 'element-plus'
    import qs from 'qs'
    export default {
        name: "authrole",
        components:{},
        data() {
            return {
                single:true,
                total:0,
                currentPage:1,
                pageSize:5,
                form:{},
                roles:[],
                roleIds:[]
            }
        },

        mounted() {
          this.load();
        },

        methods:{

            load(){
              const userId = this.$route.params && this.$route.params.userId;
              request.get("/sys/user/authRole/"+userId).then(res =>{
                  this.roles=res.data.roles;
                  this.form = res.data.user;
                  this.total = res.data.roles.length
                  this.$nextTick(() =>{
                      this.roles.forEach(row => {
                          if(row.flag){
                              //设置角色列表的被选中
                              this.$refs.table.toggleRowSelection(row);
                          }
                      })
                  })
              });
            },

            //提交
            submitForm(){
                let params = { userId:this.form.userId,  roleIds:this.roleIds}
                let data = qs.stringify(params,{arrayFormat:'repeat'});
                request.post("/sys/user/updateAuthRole",data).then(res =>{
                    if(res.code ===0){
                        ElMessage.success("操作成功");
                        this.goBack();
                    }
                });

            },


            //返回
            goBack(){
                this.$store.commit('closeTab','/authrole');
                this.$router.push({ name:'user'})
            },


            handleSizeChange(pageSize) {
                this.pageSize = pageSize
                this.load()
            },

            //改变当前页码触发
            handleCurrentChange(pageNum) {
                this.currentPage = pageNum
                this.load()
            },


            // 多选框选中数据
            handleSelectionChange(selection) {
                this.roleIds = selection.map(item => item.roleId)
                this.single = selection.length!=1
            },
        }

    }
</script>

<style scoped>

</style>
